<template>
  <div class="like">
    <p class="want">--可能你想要--</p>
    <van-list
      class="detail-box"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      offset="0"
      @load="onLoad"
    >
     <div
        v-for="item in goodslist"
        :key="item.proid"
        @click="goGoodsDetail(item.proid)"
      >
        <img :src="item.img1" />
        <p class="title">{{ item.proname }}</p>
        <p class="price">¥{{ item.originprice }}</p>
      </div>
    </van-list>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "WantsVue",
  data() {
    return {
      pageIndex: 1,
      loading: false,
      finished: false,
      goodslist: [],
    };
  },
  methods: {
    onLoad() {
      console.log("onLoad");
      axios({
        url: "api/pro/recommendlist",
        params: {
          count: this.pageIndex,
          limitNum: 10,
        },
      })
        .then((res) => {
          // console.log('res',res.data.data);
          
          if (res.data.code == 200) {
            // console.log("res.data.data.length",res.data.data.length);
            this.goodslist = [...this.goodslist, ...res.data.data];
            this.loading = false;
            this.pageIndex++;
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    goGoodsDetail(id) {
      this.$router.replace("/GoodsDetail/" + id);
      window.location.reload();
    },
  },
};
</script>

<style scoped>
.detail-box {
  width: 100%;
  font-size: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.detail-box div {
  width: 48%;
  text-align: center;
  break-inside: avoid;
  border-radius: 0.5rem;
  background-color: #fff;
  margin-bottom: 1rem;
}

.detail-box div img {
  width: 90%;
}

.title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  margin: 0.5rem;
}

.price {
  font-size: 1rem;
  text-align: left;
  color: red;
  margin-left: 1rem;
}
.like {
  background-color: #fff;
}
.want{
  margin-left: 9.5rem;
  font-size:14px;
  color:blue
}</style>
